<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<title></title>
		<style type="text/css">
			.search input{
				width: 10.4rem;
			}
			.myform{
				padding-top: 4.4rem;
			}
		</style>
	</head>

	<body class="gray-bg">
		<form class="myform">
			<div class="hot-search row">
				<a href="javascript:history.go(-1);"><img src="../images/back.png" /></a>
				<div class="search row" style="width: 12rem;">
					<img src="../images/gray-search.png" style="width: .8rem;margin-left: .5rem;" />
					<input type="text" placeholder="请输入小区名称" />
				</div>
				<a href="#"><img src="../images/s-map.png" class="find" /></a>
			</div>
			<ul class="navbar row">
				<li><span>区域</span></li>
				<li><span>价格</span></li>
				<li><span>户型</span></li>
				<li><span>更多</span></li>
			</ul>
			<div class="mask"></div>
			<div class="navlist">
				<div class="option column">
					<a href="javascript:;">默认排序</a>
					<a href="javascript:;">最新发布</a>
					<a href="javascript:;">总价从低到高</a>
					<a href="javascript:;">总价从高到低</a>
					<a href="javascript:;">单价从低到高</a>
					<a href="javascript:;">单价从高到低</a>
					<a href="javascript:;">面积从大到小</a>
					<a href="javascript:;">面积从小到大</a>
				</div>
				<div class="option column">
					<a href="javascript:;">50万</a>
					<a href="javascript:;">50万</a>
					<a href="javascript:;">50万</a>
					<a href="javascript:;">50万</a>
					<a href="javascript:;">50万</a>
				</div>
				<div class="option column">
					<a href="javascript:;">1房</a>
					<a href="javascript:;">2房</a>
					<a href="javascript:;">3房</a>
					<a href="javascript:;">4房</a>
					<a href="javascript:;">5房</a>
				</div>
				<div class="option column more-box">
					<div class="more-option">
						<p>面积</p>
						<ul class="row">
							<li onclick="clickMore(this)">50㎡以内</li>
							<li onclick="clickMore(this)">50-70㎡</li>
							<li onclick="clickMore(this)">70-100㎡</li>
							<li onclick="clickMore(this)">100-130㎡</li>
							<li onclick="clickMore(this)">130-160㎡</li>
							<li onclick="clickMore(this)">160-200㎡</li>
							<li onclick="clickMore(this)">200㎡以上</li>
						</ul>
						<div class="infinite row">
							<input type="text"/>
							<label>-</label>
							<input type="text"/>
							<button type="button">筛选</button>
						</div>
					</div>
					<div class="more-option">
						<p>类型</p>
						<ul class="row">
							<li onclick="clickMore(this)">普通住宅</li>
							<li onclick="clickMore(this)">写字楼</li>
							<li onclick="clickMore(this)">商铺</li>
							<li onclick="clickMore(this)">别墅</li>
							<li onclick="clickMore(this)">酒店式公寓</li>
							<li onclick="clickMore(this)">商住两用</li>
							<li onclick="clickMore(this)">公寓</li>
							<li onclick="clickMore(this)">厂房</li>
							<li onclick="clickMore(this)">其他</li>
						</ul>
					</div>
					<div class="more-option">
						<p>房龄</p>
						<ul class="row">
							<li onclick="clickMore(this)">2年以内</li>
							<li onclick="clickMore(this)">2-5年</li>
							<li onclick="clickMore(this)">5-10年</li>
							<li onclick="clickMore(this)">10年以上</li>
						</ul>
					</div>
					<div class="more-option">
						<p>装修情况</p>
						<ul class="row">
							<li onclick="clickMore(this)">毛坯房</li>
							<li onclick="clickMore(this)">简单装修</li>
							<li onclick="clickMore(this)">中档装修</li>
							<li onclick="clickMore(this)">精装修</li>
						</ul>
					</div>
					<div class="more-option">
						<p>朝向</p>
						<ul class="row">
							<li onclick="clickMore(this)">东</li>
							<li onclick="clickMore(this)">南</li>
							<li onclick="clickMore(this)">西</li>
							<li onclick="clickMore(this)">北</li>
							<li onclick="clickMore(this)">东南</li>
							<li onclick="clickMore(this)">东北</li>
							<li onclick="clickMore(this)">西南</li>
							<li onclick="clickMore(this)">西北</li>
							<li onclick="clickMore(this)">南北</li>
						</ul>
					</div>
					<div class="more-btn row">
						<button type="button">确认</button>
						<button type="reset">重置</button>
					</div>
				</div>
			</div>
		</form>
		<div class="recommonbox" style="padding-bottom: 0;padding-top: 0;">
			<div class="re-conbox">
			  		<a href="#" class="content row">
			  			<img src="../images/pic..jpg" class="house-pic"/>
			  			<div class="column">
			  				<h1>万科东里 板楼8层</h1>
			  				<span>2室2厅 123㎡</span>
			  				<div class="row">
			  					<img src="../images/location.png" class="locate"/>
			  					<p>海口市美兰区龙昆南二路海口市美兰区龙昆南二路海口市美兰区龙昆南二路</p>
			  				</div>
			  				<ul class="row">
			  					<li>满两年</li>
			  					<li>满五年</li>
			  					<li>随时可看</li>
			  				</ul>
			  			</div>
			  			<em>220万</em>
			  		</a>
			  		<a href="#" class="content row">
			  			<img src="../images/pic..jpg" class="house-pic"/>
			  			<div class="column">
			  				<h1>万科东里 板楼8层</h1>
			  				<span>2室2厅 123㎡</span>
			  				<div class="row">
			  					<img src="../images/location.png" class="locate"/>
			  					<p>海口市美兰区龙昆南二路海口市美兰区龙昆南二路海口市美兰区龙昆南二路</p>
			  				</div>
			  				<ul class="row">
			  					<li>满两年</li>
			  					<li>满五年</li>
			  					<li>随时可看</li>
			  				</ul>
			  			</div>
			  			<em>220万</em>
			  		</a>
			  	</div>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/wap.js"></script>
		<script type="text/javascript">
			//筛选
			var n;
			$('.myform .navbar li').click(function(){
				n = $('.myform .navbar li').index(this);
				if($(this).hasClass('on')){
					$('.myform .navbar li').removeClass('on');
					$('.navlist .option').slideUp();
					$('.mask').fadeOut();
				} else {
					$('.myform .navbar li').removeClass('on');
					$(this).addClass('on');
					$('.navlist .option').css('display','none').eq(n).css('display','flex');
					$('.mask').fadeIn();
				}
			});
			$('.navlist .option a').click(function(){
				$(this).parent('.option').find('a').removeClass('on');
				$(this).addClass('on');
//				$('.myform .navbar li span').eq(n).html($(this).html());
				setTimeout(function(){
					$('.navlist .option').slideUp();
					$('.mask').fadeOut();
					$('.myform .navbar li').removeClass('on');
				},800)
			});
			//点击更多选择
			function clickMore(e){
				$(e).siblings().removeClass('on');
				$(e).addClass('on');
			}
		</script>
	</body>

</html>